<script setup lang="ts">
import dayjs from 'dayjs'
import LessonStatModal from './LessonStatModal.vue'
import { ReportApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useForm, useTable } from '@/hooks'
import { formatMoney } from '@/utils/common'

defineOptions({ name: 'LessonStatReport' })

const { form, resetForm } = useForm<any>({
  dateFrom: dayjs().startOf('month').format('YYYY-MM-DD'),
  dateTo: dayjs().endOf('month').format('YYYY-MM-DD'),
})

const {
  tableData,
  loading,
  search,
} = useTable(() => ReportApi.getLessonStatReport(form))

const columns: TableInstanceColumns[] = [
  { title: '序号', dataIndex: 'index', width: 66, align: 'center', fixed: 'left', render: ({ rowIndex }) => rowIndex + 1, summaryCellStyle: () => {
    return { backgroundColor: 'rgb(var(--arcoblue-6))', color: '#fff' }
  } },
  { title: '班级', dataIndex: 'classId', slotName: 'classId', fixed: 'left', width: 300 },
  { title: '老师', dataIndex: 'leadTeacherName', width: 120 },
  { title: '总课消', dataIndex: 'totalLessonPrice', slotName: 'totalLessonPrice', align: 'right', width: 120 },
  { title: '已课消', dataIndex: 'consumedLessonPrice', slotName: 'consumedLessonPrice', align: 'right', width: 120 },
  { title: '未课消', dataIndex: 'remainedLessonPrice', slotName: 'remainedLessonPrice', align: 'right', width: 120 },
  { title: '操作', slotName: 'action', width: 120, align: 'center', fixed: 'right' },
]

const tableSummary = ({ columns, data }) => {
  const countData = {
    totalLessonPrice: 0,
    consumedLessonPrice: 0,
    remainedLessonPrice: 0,
  }
  data.forEach((record) => {
    countData.totalLessonPrice += record.totalLessonPrice
    countData.consumedLessonPrice += record.consumedLessonPrice
    countData.remainedLessonPrice += record.remainedLessonPrice
  })

  return [{
    index: '合计',
    totalLessonPrice: formatMoney(countData.totalLessonPrice),
    consumedLessonPrice: formatMoney(countData.consumedLessonPrice),
    remainedLessonPrice: formatMoney(countData.remainedLessonPrice),
  }]
}

const summary = computed(() => {
  const countData = {
    totalLessonPrice: 0,
    consumedLessonPrice: 0,
    remainedLessonPrice: 0,
  }
  tableData.value.forEach((record) => {
    countData.totalLessonPrice += record.totalLessonPrice
    countData.consumedLessonPrice += record.consumedLessonPrice
    countData.remainedLessonPrice += record.remainedLessonPrice
  })

  return {
    totalLessonPrice: formatMoney(countData.totalLessonPrice),
    consumedLessonPrice: formatMoney(countData.consumedLessonPrice),
    remainedLessonPrice: formatMoney(countData.remainedLessonPrice),
  }
})

// 新增
const LessonStatModalRef = ref<InstanceType<typeof LessonStatModal>>()
const onDetail = (record) => {
  LessonStatModalRef.value?.open({
    dateFrom: form.dateFrom,
    dateTo: form.dateTo,
    classId: record.classId,
    className: record.className,
  })
}

const refresh = () => {
  resetForm()
  search()
}

watch(form, () => search())
</script>

<template>
  <ProPage title="课消统计">
    <template #title-right>
      <div class="ml-100px flex">
        <StatisticsItem tip="总课消" icon="count" unit="" count-color="#ff7d00" :count="summary.totalLessonPrice" />
        <StatisticsItem tip="已课消" icon="count" unit="" count-color="#ff7d00" :count="summary.consumedLessonPrice" />
        <StatisticsItem tip="未课消" icon="count" unit="" count-color="#ff7d00" :count="summary.remainedLessonPrice" />
      </div>
    </template>
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="false"
      :summary="false"
      @refresh="refresh"
    >
      <template #search-panel>
        <a-space direction="vertical" size="medium">
          <a-space>
            <label class="label">时间段</label>
            <RangePicker v-model:from="form.dateFrom" v-model:to="form.dateTo" :time="false" />
          </a-space>
          <a-space>
            <label class="label">学期年级</label>
            <YearTermCascader v-model:class-year="form.classYear" v-model:term="form.term" class="!min-w-200px" check-strictly />
            <DictSelect v-model="form.grade" type="select" code="Grade" placeholder="年级" class="!min-w-120px" multiple />
            <DictSelect v-model="form.subject" type="select" code="Subject" placeholder="科目" class="!w-120px" />
          </a-space>

          <a-space>
            <label class="label">其他条件</label>
            <DictSelect v-model="form.classCategory" type="button" code="ClassCategoryEnum" placeholder="类型" />
            <EmployeeSelect v-model="form.leadTeacherId" type="LEAD_TEACHER" placeholder="主讲老师" class="!min-w-150px" />
            <ClassTypeSelect v-model="form.classTypeId" placeholder="班型" class="!min-w-150px" />
            <ClassroomCascader v-model:campus-id="form.campusId" v-model:classroom-id="form.classroomId" class="!min-w-200px" check-strictly />
          </a-space>
        </a-space>
      </template>

      <template #classId="{ record }">
        <CellClassInfo :id="record.classId" :name="record.className" />
      </template>
      <template #totalLessonPrice="{ record }">
        {{ formatMoney(record.totalLessonPrice) }}
      </template>
      <template #consumedLessonPrice="{ record }">
        {{ formatMoney(record.consumedLessonPrice) }}
      </template>
      <template #remainedLessonPrice="{ record }">
        {{ formatMoney(record.remainedLessonPrice) }}
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link @click.stop="onDetail(record)">
            详情
          </a-link>
        </a-space>
      </template>
      <template #summary-cell="{ column, record, rowIndex }">
        <div>
          {{ record[column.dataIndex] }}
        </div>
      </template>
    </ProTable>
    <LessonStatModal ref="LessonStatModalRef" />
  </ProPage>
</template>

<style lang="less" scoped>
.label {
  display: inline-block;
  width: 60px;
  text-align: right;
  flex-shrink: 0;
  margin-right: 10px;
  color: var(--color-text-1);
}
</style>
